<template>
  <div class="search">
    <Row>
      <Col>
        <Card>
          <Row style="margin-bottom:20px;">
            <Button @click="getList" icon="md-refresh" style="margin-right:10px">刷新</Button>
            <Button @click="add" type="primary" style="margin-right:10px">添加</Button>
            <Select v-model="searchForm.checkEnum" style="width: 200px;margin-left: 200px;" clearable>
                <!-- <Option value="">全部</Option> -->
                <Option value="PRE_CHECK">待审核</Option>
                <Option value="CHECK_SUCCESS">审核成功</Option>
                <Option value="CHECK_FAIL">审核失败</Option>
            </Select>
            <!-- <Button @click="add" type="primary" style="margin-right:10px">添加</Button> -->
            <Button @click="handleSearch" type="primary" style="margin-left:10px">搜索</Button>
          </Row>

          <Row>
            <Table :loading="loading" border :columns="commodityColumns" :data="commodityData" ref="table" sortable="custom" @on-sort-change="changeSort"></Table>
          </Row>

          <Row type="flex" justify="end" class="page">
            <Page :current="searchForm.pageNumber" :total="pageTotal" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
          </Row>
        </Card>
      </Col>
    </Row>

    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="600">
      <Form ref="form" :model="form" :label-width="100" :rules="formValidate" >
        <FormItem label="推送标题" prop="title">
          <Input v-model="form.title" style="width: 100%" placeholder="请输入推送标题" />
        </FormItem>
        <FormItem label="推送内容" prop="content">
          <Input v-model="form.content" style="width: 100%" type="textarea" placeholder="请输入推送内容" />
        </FormItem>
        <FormItem label="推送平台" prop="platformType">
          <Select v-model="form.platformType" style="width:100%">
            <Option value="ALL">全部</Option>
            <Option value="ANDROID">安卓</Option>
            <Option value="IOS">ios</Option>
          </Select>
        </FormItem>
        <FormItem label="推送类型" prop="pushType">
          <Select v-model="form.pushType" style="width:100%" @on-change="changeType">
            <Option value="H5">h5页面</Option>
            <Option value="STORE_DETAIL">商家详情</Option>
            <Option value="GOOD_DETAIL">商品详情</Option>
            <Option value="SET_MEAL">套餐详情</Option>
            <!-- <Option value="GOOD_DETAIL">商品详情</Option> -->
          </Select>
        </FormItem>
        <FormItem label="推送值" prop="pushValue" v-if="pushType === 'H5'">
          <Input v-model="form.pushValue" style="width: 100%" placeholder="请输入推送内容" />
        </FormItem>
        <FormItem label="商品列表" prop="pushValue" v-if="pushType === 'GOOD_DETAIL'">
          <Select v-model="form.pushValue" style="width:100%">
            <Option :value="item.id" v-for="(item,index) in goodsData" :key="index">{{item.goodName}}</Option>
          </Select>
        </FormItem>
        <FormItem label="套餐列表" prop="pushValue" v-if="pushType === 'SET_MEAL'">
          <Select v-model="form.pushValue" style="width:100%">
            <Option :value="item.id" v-for="(item,index) in comboData" :key="index">{{item.goodName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible=false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
      </div>
    </Modal>

    <Modal :title="modalTitle" v-model="checkVisible" :mask-closable='false' :width="600">
      <Form ref="checkform" :model="checkform" :label-width="100" :rules="checkformValidate" >
        <FormItem label="审核状态" prop="checkEnum">
          <Select v-model="checkform.checkEnum" style="width:100%">
            <!-- <Option value="PRE_CHECK">待审核</Option> -->
            <Option value="CHECK_SUCCESS">审核成功</Option>
            <Option value="CHECK_FAIL">审核失败</Option>
          </Select>
        </FormItem>
        <FormItem label="审核原因" prop="checkReason">
          <Input v-model="checkform.checkReason" style="width: 100%" type="textarea" placeholder="请输入审核原因" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="checkVisible=false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="checkHandleSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { validateName } from "@/libs/validate";
import {userInfo} from "@/api/index.js";
export default {
  data() {
    return {
      pageTotal: 0,
      loading: false,
      checkVisible: false,
      modalTitle: "",
      modalType: 0,
      form: {
        id: "",
        title: "",
        platformType: "",
        audienceType: "ALL",
        content: "",
        pushType: "",
        pushValue: ""
      },
      formValidate: {
        content: [{ required: true, message: "请输入推送内容", trigger: "blur" },
          { validator: validateName, trigger: "blur" }],
        title: [{ required: true, message: "请输入推送标题", trigger: "blur" },
          { validator: validateName, trigger: "blur" }],
        platformType: [{ required: true, message: "请选择推送平台", trigger: "change" }],
        pushType: [{ required: true, message: "请选择推送类型", trigger: "change" }],
        pushValue: [{ required: true, message: "推送值不能为空" }],
      },
      checkform: {
        id: "",
        checkEnum: "",
        checkReason: ""
      },
      checkformValidate: {
        checkReason: [{ required: true, message: "请输入审核原因", trigger: "blur" }],
        checkEnum: [{ required: true, message: "请选择审核状态", trigger: "change" }],
      },
      modalVisible: false, //模态框的显示隐藏
      commodityData: [],
      //商品显示
      commodityColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          title: "推送标题",
          key: "title"
        },
        {
          title: "推送内容",
          key: "content"
        },  
        {
          title: "推送平台",
          key: "platformType"
        },      
        {
          title: "推送目标类型",
          key: "audienceType"
        },
        {
          title: "推送类型",
          key: "pushType"
        },  
        {
          title: "推送值",
          key: "pushValue"
        }, 
        {
          title: "审核状态",
          key: "checkEnum"
        },
        {
          title: "是否推送",
          key: "pushSuccess",
        },
        {
          title: "审核原因",
          key: "checkReason"
        },
        {
          title: "审核时间",
          key: "checkTime"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "操作",
          width: 200,
          align: "center",
          fixed: "right",
          render: (h, params) => {
            return h("div", [
                // h(
                //   "Button",
                //   {
                //     props: {
                //       type: "info",
                //       size: "small",
                //     },
                //     style: {
                //       display: (params.row.checkEnum === "待审核") ? "inline-block" : "none",
                //       marginRight: "10px"
                //     },
                //     on: {
                //       click: () => {
                //         this.check(params.row);
                //       }
                //     }
                //   },
                //   "审核"
                // ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                    style: {
                      display: (params.row.checkEnum === "待审核") ? "inline-block" : "none",
                      marginRight: "10px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "default",
                      size: "small",
                    },
                    style: {
                      display: (params.row.checkEnum === "审核成功！" && params.row.pushSuccess === "否") ? "inline-block" : "none",
                      marginRight: "10px"
                    },
                    on: {
                      click: () => {
                        this.pushData(params.row);
                      }
                    }
                  },
                  "推送"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small",
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                ),
            ]);
          }
        }
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        checkEnum: "",
        userId: ""
      },
      submitLoading: false,
      goodsData: [],
      comboData: [],
      pushType: ""
    };
  },
  methods: {
    changeSort () {

    },

    handleSearch () {
        if (this.searchForm.checkEnum === undefined) {
            this.searchForm.checkEnum = ""
        }
        this.searchForm.pageNumber = 1;
        this.getList();
    },

    getUserInfo() {
        userInfo().then(res=> {
            if (res.success) {
                this.searchForm.userId = res.result.id;
                this.getList()
            }
        })
    },

    changeType (e) {
      console.log(e);
      this.pushType = e;
      this.form.pushValue = "";
      if (e === "H5") {

      } else if (e === "STORE_DETAIL") {
        this.form.pushValue = this.searchForm.userId;
      } else if (e === "GOOD_DETAIL") {

      } else if (e === "SET_MEAL") {

      }
    },
    
    // 获取商品列表
    getList() {
      this.loading = true;
      this.postRequest("/jpush/getJpushList", this.searchForm).then(res=> {
        this.loading = false
        if (res.success) {
          var arr = res.result.dataResult;
          for(let val of arr){
            for(let i in val){
              (val[i] === null) ? (val[i] = "-") : ""
            }
          }
          this.commodityData = res.result.dataResult;
          this.pageTotal = res.result.totalSize
        } else {
          this.commodityData = [];
          this.pageTotal = 0;
        }
      })
    },

    add () {
        this.modalTitle = "添加";
        this.modalType = 0;
        this.$refs.form.resetFields();
        this.modalVisible = true;
    },

    edit (v) {
        this.modalTitle = "编辑";
        this.modalType = 1;
        this.form.id = v.id;
        this.form.title = v.title;
        this.form.content = v.content;
        if (v.platformType === "全部") {
          this.form.platformType = "ALL"
        } else if (v.platformType === "安卓") {
          this.form.platformType = "ANDROID"
        } else if (v.platformType === "ios") {
          this.form.platformType = "IOS"
        }
        // this.pushType = v.pushType;
        if (v.pushType === "h5页面") {
          this.form.pushType = "H5";
          this.pushType = "H5"
        } else if (v.pushType === "套餐详情") {
          this.form.pushType = "SET_MEAL";
          this.pushType = "SET_MEAL"
        } else if (v.pushType === "商品详情") {
          this.form.pushType = "GOOD_DETAIL";
          this.pushType = "GOOD_DETAIL"
        } else if (v.pushType === "商家详情") {
          this.form.pushType = "STORE_DETAIL";
          this.pushType = "STORE_DETAIL"
        }
        this.form.pushValue = v.pushValue;
        this.modalVisible = true;
    },

    handleSubmit () {
        this.$refs.form.validate(valid=> {
            if (valid) {
                this.submitLoading = true;
                if (this.modalType === 0) {
                    delete this.form.id;
                    this.postRequest("/jpush/insertOrUpdateJpush", this.form).then(res=> {
                        this.submitLoading = false;
                        if (res.success) {
                            this.$Message.success("添加成功");
                            this.getList();
                            this.modalVisible = false;
                        } else {
                            this.$Message.error(res.message);
                            this.modalVisible = false;
                        }
                    })
                } else {
                    this.postRequest("/jpush/insertOrUpdateJpush", this.form).then(res=> {
                        this.submitLoading = false;
                        if (res.success) {
                            this.$Message.success("修改成功");
                            this.getList();
                            this.modalVisible = false;
                        } else {
                            this.$Message.error(res.message);
                            this.modalVisible = false;
                        }
                    }) 
                }
            }
        })
    },

    check (v) {
        this.modalTitle = "审核"
        this.$refs.checkform.resetFields();
        this.checkform.id = v.id;
        this.checkVisible = true;
    },

    checkHandleSubmit () {
        this.$refs.checkform.validate(valid=> {
            if (valid) {
                this.submitLoading = true;
                this.postRequest("/jpush/checkJpush", this.checkform).then(res=> {
                    this.submitLoading = false;
                    if (res.success) {
                        this.$Message.success("审核成功");
                        this.getList();
                        this.checkVisible = false;
                    } else {
                        this.$Message.error(res.message);
                        this.checkVisible = false;
                    }
                })
            }
        })
    },

    remove (v) {
        this.$Modal.confirm({
            title: "确认删除",
            content: "确认删除所选数据吗？",
            loading: true,
            onOk: () => {
                var data = {
                    ids: v.id
                }
                this.postRequest("/jpush/removeJpush", data).then(res=> {
                    this.loading = false;
                    if (res.success) {
                        this.$Message.success("删除成功");
                        this.getList();
                        this.$Modal.remove()
                    } else {
                        this.$Message.error(res.message);
                        this.$Modal.remove()
                    }
                })
            }
        })
    },

    pushData (v) {
        this.$Modal.confirm({
            title: "确认推送",
            content: "确认推送这条内容吗？",
            loading: true,
            onOk: ()=> {
                var params = {
                    id: v.id
                }
                this.postRequest("/jpush/pushArticleToUser", params).then(res=> {
                    this.loading = false;
                    if (res.success) {
                        this.$Message.success("推送成功");
                        this.getList();
                        this.$Modal.remove();
                    } else {
                        this.$Message.error(res.message);
                        this.$Modal.remove();
                    }
                })
            }
        })
    },

    getGoodsInfo () {
      var data = {

      }
      this.postRequest("/good/PCgoodsList").then(res=> {
        if (res.success) {
          this.goodsData = res.result.data;
        } else {
          this.goodsData = []
        }
      })
    },

    getComboInfo () {
      this.postRequest("/good/PCgoodsPackageList").then(res=> {
        if (res.success) {
          this.comboData = res.result.data;
        } else {
          this.comboData = []
        }
      })
    },

    // 切换页
    changePage(num) {
        this.searchForm.pageNumber = num
        this.getList()
    },
    // 切换每页显示条数
    changePageSize (num) {
        this.searchForm.pageSize = num;
        this.getList()
    },
  },
  created() {
    // this.getList();
    this.getUserInfo();
    this.getGoodsInfo();
    this.getComboInfo()
  }
};
</script>

<style>
.commodity-content {
  padding: 16px;
  background-color: #ffffff;
}
.itemInput {
  width: 160px;
}
.selected {
  width: 50%;
}
.imgModal {
  text-align: center;
}
.img {
  width: 50px;
  height: 50px;
}
.page{
        margin: 16px;
        overflow: hidden;
        text-align: right;
    }
.paygos{
  margin-top: 40px;
}
.paygo1{
  margin-top: -50px;
}
</style>